<template>
  <el-container class="container" style="        background-color: #EEF0F6">
    <el-header style="        padding: 0;
        margin: 0">
      <div class="header w_full flex-row-center space-between">
        <div class="flex-row-center" style="        margin-left: 24px;">
          <span class="header_title">深圳陆纳信息技术有限公司</span>
          <el-button link :icon="House" style="        margin-left: 32px;" @click="click_go_workBench">工作台</el-button>
        </div>
        <div class="flex-row-center" style="        margin-right: 24px;">
          <el-button link :icon="Setting">设置</el-button>
          <div class="flex-row center-center"
               style="        margin-left: 32px;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: #D4E3FC">
            <el-icon>
              <User/>
            </el-icon>
          </div>
          <el-dropdown style="        margin-left: 8px;">
            <div class="flex-row-center">
              {{ userInfo.userId }} {{ userInfo.userName.length == 0 ? "未知用户" : userInfo.userName }}
              {{ userInfo.officeName }}
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                    @click="click_exit">退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <div class="full" style="padding: 0 0 16px 0;
    ">
          <div class="flex-col left_bg" style="        height: 100%;
        width: 200px;
        border-radius: 12px">
            <h5 class="appTitle">培训管理系统</h5>

            <el-menu
                default-active="2"
                class="el-menu-vertical-demo" style="background-color: transparent;
        margin-top: 16px;
        border: none
    "
            >
              <el-menu-item index="4" @click="router.push('/trainListView')">
                <el-icon>
                  <setting/>
                </el-icon>
                <span>培训管理</span>
              </el-menu-item>
              <el-menu-item index="5" @click="router.push('/dataBankListView')">
                <el-icon>
                  <Management/>
                </el-icon>
                <span>资料库</span>
              </el-menu-item>             
            </el-menu>

          </div>
        </div>
      </el-aside>
      <el-main class="flex-col" >
          <div class="flex_1" style="padding: 0 24px 0 16px;">
              <router-view></router-view>
          </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script lang="ts" setup>
import {useRouter} from "vue-router";
import {DocumentRemove, House, Management, Setting, User} from "@element-plus/icons-vue";
import {useUserStore} from '@/store/user'

const router = useRouter();
const routers = router.getRoutes().filter(x => x.meta.metaType == 'naire');
console.log(routers);


const userStore = useUserStore()
const userInfo = userStore.userInfo;
console.log('userInfo', userInfo);
const click_exit = () => {
  // 退出登录逻辑
  //清空
  localStorage.setItem('token', '');
  router.push('/login');
  userStore.logout();
}

const click_go_workBench = () => {
  router.push('/');
}

</script>

<style lang="scss" scoped>
.left_bg {
  width: 100%; /* 容器宽度 */
  height: auto; /* 高度根据内容自动调整 */
  background-image: url("@/assets/naire_left_bg.png");
  background-repeat: no-repeat; /* 不重复平铺 */
  background-position: center bottom; /* 居中显示 */
  background-size: cover;
}

.header {
  background-color: #FFFFFF;
  box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
  border-radius: 0;
  height: 48px;
}


.appTitle {
  margin-left: 16px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #A6A6A6;
  line-height: 19px;


}

.el-menu-item,
:deep .el-sub-menu .el-sub-menu__title{
  margin: 2px 16px;
  padding-left: 0;
  font-size: 16px;
  font-weight: bold;
  color: #7D8592;
  line-height: 19px;
  border-radius: 10px;
}


.el-menu-item.is-active {
  margin: 2px 16px;
  background-color: #ECF3FE;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #3F8CFF;
  line-height: 19px;

}
</style>
